import {Component, useEffect, useState} from 'react'
import {View, Text, Swiper, SwiperItem} from '@tarojs/components'
import {AtButton} from 'taro-ui'

import "taro-ui/dist/style/components/button.scss" // 按需引入
import "taro-ui/dist/style/components/loading.scss"
import './index.less'
import useModel from "./model";


interface isState {
  active: number,
  array: { name: number }[],
}

export default function Index() {
  const [active, setActive] = useState(2);
  const [array, setArray] = useState([{name: 1}, {name: 2}, {name: 3}, {name: 4}, {name: 5}, {name: 1}, {name: 2}, {name: 3}, {name: 4}, {name: 5}]);
  const {state, methods} = useModel();

  useEffect(() => {
    console.log(`====== active: ${active}`);

    methods.getObjects({active, name: ''});
  }, [active]);

  return (
    <View className='indexContenter'>
      <Swiper
        className='test-h'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        vertical
        circular
        indicatorDots
        // autoplay
      >
        <SwiperItem>
          <View className='demo-text-1'>1</View>
        </SwiperItem>
        <SwiperItem>
          <View className='demo-text-2'>2</View>
        </SwiperItem>
        <SwiperItem>
          <View className='demo-text-3'>3</View>
        </SwiperItem>
      </Swiper>
      <View className='flex flex-main-around tabBox'>
        <View className={active === 0 ? 'activeClass' : ''} onClick={() => setActive(0)}>男装</View>
        <View className={active === 1 ? 'activeClass' : ''} onClick={() => setActive(1)}>女装</View>
        <View className={active === 2 ? 'activeClass' : ''} onClick={() => setActive(2)}>童装</View>
      </View>
      {
        active === 0 && array.map((item, index) => {
          return (
            <View key={index}>
              {`=================${state.object1.active}`}
              <View>男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装</View>
            </View>
          )
        })
      }
      {
        active === 1 && (
          <View>
            {`=================${state.object1.active}`}
            <View>女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装</View>
          </View>
        )
      }
      {
        active === 2 &&(
          <View>
            {`=================${state.object1.active}`}
            <View>童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装</View>
          </View>
        )
      }
    </View>
  )
}

// class Index2 extends Component <any, isState> {
//
//   constructor(props) {
//     super(props);
//     this.state = {
//       active: 2,
//       array: [{name: 1}, {name: 2}, {name: 3}, {name: 4}, {name: 5}, {name: 1}, {name: 2}, {name: 3}, {name: 4}, {name: 5}]
//     }
//   }
//
//   componentWillMount() {
//   }
//
//   componentDidMount() {
//   }
//
//   componentWillUnmount() {
//   }
//
//   componentDidShow() {
//   }
//
//   componentDidHide() {
//   }
//   windowOnScroll(){
//     let _this =this;
//     window.onscroll =function(){
//       //获取滚动条滚动的距离
//       let h = document.body.scrollTop;
//       console.log(h);
//
//     }
//   };
//
//
//   clickTab(index) {
//     this.setState({
//       active: index
//     })
//   }
//
//   render() {
//     return (
//       <View className='indexContenter'>
//         <Swiper
//           className='test-h'
//           indicatorColor='#999'
//           indicatorActiveColor='#333'
//           vertical
//           circular
//           indicatorDots
//           // autoplay
//         >
//           <SwiperItem>
//             <View className='demo-text-1'>1</View>
//           </SwiperItem>
//           <SwiperItem>
//             <View className='demo-text-2'>2</View>
//           </SwiperItem>
//           <SwiperItem>
//             <View className='demo-text-3'>3</View>
//           </SwiperItem>
//         </Swiper>
//         <View className='flex flex-main-around tabBox'>
//           <View className={this.state.active === 0 ? 'activeClass' : ''} onClick={this.clickTab.bind(this, 0)}>男装</View>
//           <View className={this.state.active === 1 ? 'activeClass' : ''} onClick={this.clickTab.bind(this, 1)}>女装</View>
//           <View className={this.state.active === 2 ? 'activeClass' : ''} onClick={this.clickTab.bind(this, 2)}>童装</View>
//         </View>
//         {
//           this.state.active === 0 && this.state.array.map((item, index) => {
//             return (
//               <View key={index}>
//                 <View>男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装男装</View>
//               </View>
//             )
//           })
//         }
//         {
//           this.state.active === 1 && (
//             <View>
//               <View>女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装女装</View>
//             </View>
//           )
//         }
//         {
//           this.state.active === 2 &&(
//             <View>
//               <View>童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装童装</View>
//             </View>
//           )
//         }
//       </View>
//     )
//   }
// }

